import React from 'react';
import { Balloon, Switch } from '@teamix/ui';
import { ORGANIZATION_ADMIN_ROLES } from 'utils/constants.js';
import { access } from 'components/accessContainer/util';
import { navigate } from 'utils/router';
import CryptoSwitchConfirm from './cryptoSwitchConfirm';
import intl from '../../../../../../../../../../locale';

const { organization } = window.FORCE;
export default class CloneToolTip extends React.Component {
  goOrgCrypto = () => {
    navigate('/settings/encryption');
  };

  getCryptoEnableInfo = () => {
    const { orgCryptoInfo } = this.props;
    const isOrgAdmin = access(ORGANIZATION_ADMIN_ROLES, organization.user_role);
    let isCryptoEnable = true;
    let cryptoDisabledTip = '';
    let cryptoBalloonType = 'primary';

    // 未授权或未开启
    if (!orgCryptoInfo.service_authorization_id) {
      isCryptoEnable = false;
      cryptoBalloonType = isOrgAdmin ? 'normal' : 'primary';
      cryptoDisabledTip = isOrgAdmin ? (
        <div>
          {intl.get({
            id: 'code-assets.containers.cryptoForm.cryptoSwitch.TheServiceIsNotEnabled',
            defaultMessage: '暂未启用该服务，请前往企业安全中心-「',
          })}

          <a onClick={this.goOrgCrypto} className="no-href-with-click ">
            {intl.get({
              id: 'code-assets.containers.cryptoForm.cryptoSwitch.RepositoryEncryption',
              defaultMessage: '仓库加密',
            })}
          </a>
          {intl.get({
            id: 'code-assets.containers.cryptoForm.cryptoSwitch.Settings',
            defaultMessage: '」设置',
          })}
        </div>
      ) : (
        <div>
          {intl.get({
            id: 'code-assets.containers.cryptoForm.cryptoSwitch.YouAreNotAuthorizedTo',
            defaultMessage: '暂无权限操作，请联系企业管理员处理',
          })}
        </div>
      );
    } else if (!isOrgAdmin && !orgCryptoInfo.project_settings_enabled) {
      isCryptoEnable = false;
      cryptoDisabledTip = (
        <div>
          {intl.get({
            id: 'code-assets.containers.cryptoForm.cryptoSwitch.YouAreNotAuthorizedTo',
            defaultMessage: '暂无权限操作，请联系企业管理员处理',
          })}
        </div>
      );
    }

    return {
      isCryptoEnable,
      cryptoDisabledTip,
      cryptoBalloonType,
    };
  };

  render() {
    const { repoCryptoInfo, isLoadingCrypto, onToggleCrypto, isToggleCrypto } = this.props;

    const { isCryptoEnable, cryptoDisabledTip, cryptoBalloonType } = this.getCryptoEnableInfo();

    const trigger = (
      <Switch
        name="cypto-switch"
        className="crypto-switch"
        checked={repoCryptoInfo.is_enabled}
        disabled={!isCryptoEnable}
        loading={isLoadingCrypto || isToggleCrypto}
      />
    );

    if (isLoadingCrypto || isToggleCrypto) {
      // 解密时增加提示
      if (repoCryptoInfo.is_enabled) {
        return (
          <Balloon.Tooltip align="t" popupStyle={{ maxWidth: 340 }} trigger={trigger}>
            {intl.get({
              id: 'code-assets.containers.cryptoForm.cryptoSwitch.TheRepositoryEncryptionIsDisabled',
              defaultMessage: '仓库加密关闭中，正在执行仓库解密，请耐心等待',
            })}
          </Balloon.Tooltip>
        );
      }
      return trigger;
    }

    if (isCryptoEnable) {
      return (
        <CryptoSwitchConfirm
          trigger={trigger}
          needPopConfirm={repoCryptoInfo.is_enabled}
          onChange={(value) => {
            onToggleCrypto && onToggleCrypto(value);
          }}
        />
      );
    } else {
      return (
        <Balloon
          closable={false}
          align="tl"
          popupStyle={{ maxWidth: 'unset' }}
          type={cryptoBalloonType}
          trigger={trigger}
        >
          {cryptoDisabledTip}
        </Balloon>
      );
    }
  }
}
